<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" justify="end" style="margin: 20px 0">
      <el-col :span="22"
        ><el-form :inline="true">
          <el-form-item label="文章分类">
            <el-select v-model="query.cate_id" placeholder="请选择分类">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章状态">
            <el-select placeholder="请选择状态" v-model="query.state">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getArrList()">筛选</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form></el-col
      >
      <el-col :span="2"
        ><el-button size="mini" type="primary" @click="addShow"
          >发表文章</el-button
        ></el-col
      >
    </el-row>
    <el-table :data="arList" border stripe>
      <el-table-column label="文章标题">
        <template #default="{ row }">
          <el-link type="primary" @click="getArtInfo(row.id)">{{
            row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类"></el-table-column>
      <el-table-column label="发表时间">
        <template #default="{ row }">{{ row.pub_data | fromSetTime }}</template>
      </el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          {{ row }}
          <el-button type="danger" size="mini" @click="deltitle(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination
      :current-page="query.pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-dialog
      top="5vh"
      title="预览文章"
      :visible="showdialogVisible"
      width="70%"
      @close="showdialogVisible = false"
    >
      <Artlnfo :newList="newList"></Artlnfo>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showdialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      top="5vh"
      title="预览文章"
      :visible="addShowList"
      width="70%"
      @close="addShowList = false"
      ><ArtPub></ArtPub>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </el-card>
</template>

<script>
import Artlnfo from './components/ArtInfo.vue'
import ArtPub from './components/ArtPub.vue'
import { reqGetArtlist, reqGetArtInfo, reqDelArticleById } from '@/api/article'
import { mapState } from 'vuex'
export default {
  name: 'theList',
  data () {
    return {
      query: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      arList: [],
      total: 0,
      showdialogVisible: false,
      newList: {},
      addShowList: false
    }
  },
  computed: { ...mapState('article', ['cateList']) },
  created () {
    this.getArrList()
    this.$store.dispatch('article/getCateList')
  },
  components: {
    Artlnfo,
    ArtPub
  },
  methods: {
    async getArrList () {
      const { data } = await reqGetArtlist(this.query)
      this.arList = data.data
      // console.log(res)
      this.total = data.total
    },
    reset () {
      this.query.cate_id = this.query.state = ''

      this.getArrList()
    },
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.getArrList()
    },
    handleCurrentChange (newNum) {
      this.query.pagenum = newNum
      this.getArrList()
    },
    // 根据文章ID 获取信息
    async getArtInfo (id) {
      this.showdialogVisible = true
      const { data } = await reqGetArtInfo(id)
      this.newList = data.data
    },
    // 根据ID删除文章
    async deltitle (id) {
      const res = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          type: 'warning'
        }
      ).catch(() => {})
      if (res !== 'confirm') return this.$message.info('已取消操作')
      const { data } = await reqDelArticleById(id)
      if (data.code !== 0) return this.$message.error('删除文章失败')
      this.$message.success('删除文章成功')
      if (this.query.pagenum > 1 && this.arList.length === 1) {
        this.query.pagenum--
      }
      this.getArrList()
    },
    // 点击发表文章
    addShow () {
      this.addShowList = true
    }
  }
}
</script>
<style lang="less" scoped>
.el-table {
  margin: 20px 0;
  /deep/.el-table__header-wrapper {
    .cell {
      color: #000 !important;
    }
  }
}
</style>
